<template>
   <div style="padding-top:100px">
     <div class="app-title-container title-position">
       <modules-title titleName="稳定性设置">
        <template slot="btn">
         
        </template>
      </modules-title>
    </div>
    <el-row>
      <el-col :span="4" :xs="24">
        <div class="head-container" style="padding-top:20px">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" node-key="id"
            :current-node-key="currentNodeKey"
            highlight-current
            ref="tree" default-expand-all
            @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24" class="right">
          <investigation v-if="label=='考察类型'"/>
          <condition v-if="label=='放置条件'"/>
          <sample v-if="label=='取样点'"/>
          <sampletype v-if="label=='样品剂型及考察项目'"/>
          <material v-if="label=='包装材料'"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {
    Investigation: ()=>import("../model/investigation"),
    Condition:()=>import("../model/condition"),
    Sample:()=>import("../model/sample"),
    Sampletype:()=>import("../model/sampletype"),
    Material:()=>import("../model/material")
  },
  data() {
    return {
      label:'考察类型',
      currentNodeKey: "1",
      defaultProps: {
        children: "children",
        label: "label"
      },
      deptOptions:[
        {
                id:'1',
                label:'考察类型',
              },
              {
                id:'2',
                label:'取样点',
              },
              {
                id:'3',
                label:'放置条件',
              },
              {
                id:'4',
                label:'样品剂型及考察项目',
              },
              {
                id:'5',
                label:'包装材料',
              },
        // {
        //   id:'0',
        //   label: '数据设置',
        //   children: [
        //       {
        //         id:'1',
        //         label:'考察类型',
        //       },
        //       {
        //         id:'2',
        //         label:'取样点',
        //       },
        //       {
        //         id:'3',
        //         label:'放置条件',
        //       },
        //       {
        //         id:'4',
        //         label:'样品类型及考察项目',
        //       },
        //       {
        //         id:'5',
        //         label:'包装材料',
        //       },
        //   ]
        // }
      ],
      data:[{
          id:1,
          resource:'cdd'
        },
        {
          id:2,
          resource:'cdd'
        },
        {
          id:3,
          resource:'cdd'
        }
        ],
    };
  },
  directives:{
    focus: {
      inserted: function(el) {
        el.children[0].focus();
      },
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
   this.$nextTick(function(){
      this.$refs.tree.setCurrentKey('1');
    }) 
  },
  methods: {
    handleNodeClick(data){
     if(data.label!='数据设置'){
        this.label = data.label
      }
    },
  },
};
</script>
<style lang="scss">
.head-container{
   height: calc(100vh - 130px);
   border-right:1px solid #e3e3e3;
  .el-tree-node:focus>.el-tree-node__content{
      background-color: #eef3fd;   //背景色
      color: #286ee6;
    }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: #eef3fd;
      color: #286ee6;
  }
  .el-tree-node__content {
    height: 32px!important;
        &:hover {
          background: #eef3fd;
          color: #286ee6;
        }
      } 
}
.lookInfo-container .el-form-item--small .el-form-item__error {
    display: none;
}
// .el-tree-node:focus>.el-tree-node__content{
//       background-color: #eef3fd;   //背景色
//     }
// .el-tree-node__content {
//   height: 32px!important;
//       &:hover {
//         background: #eef3fd;
//       }
//     }  
</style>